<template>
	<view class="life_clock_black">
		<view class="life_title">命时</view>
		<view class="life_one">小时候，我们以为自己不会老去</view>
		<view class="input_tip">猜猜你能活多久</view>
		<view @click="handleShowPicker" class="picker_btn">选择日期</view>
		<u-picker v-model="isShowPicker" mode="selector" :range="range" @confirm="handleOk" :default-selector="[74]"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { setDeadTime } from '../../../pages/Time/utils.js';
export default {
	data() {
		return {
			isShowPicker: false,
			range: new Array(150).fill(1).map((item, i) => `${i + 1}年`)
		};
	},
	methods: {
		handleShowPicker() {
			this.isShowPicker = true;
		},
		handleOk([val]) {
			setDeadTime(++val).then(res => {
				uni.navigateBack();
			});
		}
	}
};
</script>

<style lang="scss">
page {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background-color: #474747;
}
.life_title {
	text-align: center;
	font-size: 40rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}

.life_one {
	text-align: center;
	line-height: 50rpx;
}

.life_clock_black {
	color: #ddd;
	.input_tip {
		width: 50rpx;
		font-size: 40rpx;
		text-align: center;
		margin: 100rpx auto 0;
		line-height: 80rpx;
	}

	.life_title {
		font-size: 50rpx;
	}

	.life_one {
		font-size: 38rpx;
		line-height: 80rpx;
		color: #ddd;
	}

	.picker_btn {
		font-size: 34rpx;
		letter-spacing: 6rpx;
		width: 190rpx;
		line-height: 70rpx;
		text-align: center;
		border: 2rpx solid $uni-text-color-grey;
		margin: 0 auto;
		margin-top: 150rpx;
		animation-timing-function: ease-in-out;
		animation-name: breathe;
		animation-duration: 2700ms;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}
}

@keyframes breathe {
	0% {
		opacity: 0.3;
		box-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.1);
	}

	100% {
		opacity: 1;
		border: 2rpx solid $uni-text-color-grey;
		box-shadow: 0 1rpx 30rpx rgba(168, 168, 168, 0.4);
	}
}
</style>
